<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
    <script src="../commonjs/vue.js"></script>
    <style>
        .basic{
            width: 200px;
            height: 100px;
            border: solid 2px black;
        }
        .happy{
            background:linear-gradient(to top,green,red,yellow);
        }
        .sad{
            background-color: #ccc;
        }
        .normal{
            background-color: skyblue;
        }
        .a1{text-align: center}
        .a2{font-size: 22px}
        .a3{font-weight: bolder}
    </style>
</head>
<body>
    <div id="root">
        <!--:class  样式绑定文字写法 适用于不确定类名的情况下，需动态指定-->
        <div class="basic" :class="mood">文字写法 currentMood:{{mood}}</div><br>
        <button @click="changeMood">改变心情</button>
        <br><br>
        <!--:class  样式绑定数组写法 适用于要绑定的样式个数不确定，类名也不确定-->
        <div class="basic" :class="arr">数组写法 currentStyle:{{arr}}</div><br>
        <button @click="changeStyle">切换样式</button>
        <!--:class  样式绑定对象写法 适用于要绑定的样式个数确定，类名确定-->
        <br><br>
        <div class="basic" :class="obj">对象写法 currentStyle:{{obj}}</div><br>
        <button @click="changeObjStyle">切换样式</button>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        new Vue({
            el:'#root',
            data:{
                mood:'',
                arr:['a1','a2','a3'],
                obj:{
                    a1:false,
                    a2:true
                }
            },
            methods:{
                changeMood(){
                    const moodArr = ['happy','sad','normal'];
                    const x = Math.floor(Math.random()*3)
                    this.mood = moodArr[x]
                },
                changeStyle(){
                    this.arr.shift() //每次逐一删除一个样式，实际场景是使用时不确定个数，不确定类名
                },
                changeObjStyle(){
                    //使用a1则不使用a2，正式场景中可以按需选择是否同时使用或不同时使用
                    this.obj.a1 = !this.obj.a1
                    this.obj.a2 = !this.obj.a2
                }
            }
        })
    </script>
</body>
</html>